<template>
  <a-col flex="auto">
    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form-model layout="inline" ref="ruleForm" :model="queryParam">
          <z-form-item :datas="fieldArr" :form="queryParam" :gutter="8" :toggle="toggleSearchStatus">
            <a-col :span="4" slot="submit-action">
              <a-space :size="6">
                <a-button type="primary" @click="onQuery" icon="search">查询</a-button>
                <a-button @click="onResetForm" icon="reload">重置</a-button>
              </a-space>
            </a-col>
          </z-form-item>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <div>
          <a-button @click="onAdd" type="primary">新增活动</a-button>
        </div>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table
          ref="table"
          rowKey="id"
          :showAlert="false"
          :showSelection="true"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @selectedRow="onSelectedRow"
          @change="onTableChange"
        >
          <!--操作-->
          <template slot="action" slot-scope="text, record">
            <a-button @click="onDetail(record)" type="link" style="padding:0;">活动详情</a-button>
            
            <a-button @click="onPeopleDetail(record)" type="link" style="padding:0;margin-left: 10px;">参与人员</a-button>
          </template>
        </z-table>
      </div>
      <!--弹窗区域-->
    </a-card>
    <PeopleDetail ref="PeopleDetail"></PeopleDetail>
  </a-col>
</template>

<script>
import { getGroupActivityList } from '@/api/sjsk/activity/group'
import PeopleDetail from './components/GroupPeopleModal.vue'
export default {
  name: "list",
  components: {
    PeopleDetail
  },
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      rangePickerTime: [],
      show: false,
      closeTip: false,
      loading: false,
      visible: false,
      handleModalBool: false,
      isDisabled: true,
      reloading: false,
      toggle: true,
      selectKeys: [],
      form: {
        
      },
      queryParam: {
        activityResource: 2
      },
      handleModalTitle: null,
      /* 查询折叠 */
      toggleSearchStatus:false,
      fieldArr: [
        {label: '小组编号', prop: 'activityCode', tagType: 'input', span: 5},
        {label: '小组名称', prop: 'activityName', tagType: 'input', span: 5},
        {label: '活动类型', prop: 'activityType', tagType: 'dict-select', dictCode:'activityType', span: 5},
        {label: '当前状态', prop: 'activityStatus', tagType: 'dict-select', dictCode:'activityStatus', span: 5},
      ],
      columns: [
        
        {
          title: '小组编号',
          dataIndex: 'activityCode',
          width: 80,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '小组名称',
          dataIndex: 'activityName',
          width: 110,
          align: 'left',
          customRender: text => {
            return <j-ellipsis value={text} length={20} />
          }
        },
        {
          title: '活动类型',
          dataIndex: 'activityType',
          width: 60,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text === 1 ? '非强制性' : '强制性'} length={14} />
          }
        },
        {
          title: '活动地点',
          
          width: 80,
          align: 'center',
          customRender: text => {
            console.log(text)
            const str = text.activityLocation + text.activityAddress
            return <j-ellipsis value={str} length={14} />
          }
        },
        {
          title: '活动开始时间',
          dataIndex: 'activityBeginDate',
          width: 100,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '报名截止日期',
          dataIndex: 'registrationEndDate',
          width: 100,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text || '-'} length={14} />
          }
        },
        {
          title: '当前活动人数',
          
          width: 100,
          align: 'center',
          customRender: text => {
            const str = `${text.currentPeople || 0}/${text.serverPeople}`
            return <j-ellipsis value={str} length={14} />
          }
        },
        {
          title: '当前状态',
          dataIndex: 'activityStatus',
          width: 100,
          align: 'center',
          customRender: text => {
            if(text === 1) {
              return <div style="color: #AAAAAA;">待开始</div>
            } else if(text === 2) {
              return <div style="color: green;">进行中</div>
            } else {
              return <div style="color: rgba(217, 0, 27, 1);">已结束</div>
            }
          }
        },
        {
          title: '操作',
          width: 120,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {}
    }
  },
  created() {
    this.onQuery()
  },
  methods:{
    onPeopleDetail(item) {
      this.$refs.PeopleDetail.show(item.id)
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.queryParam = {
        activityResource: 2
      }
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      let form = Object.assign({}, this.queryParam, this.pageFilter)
      this.loading = true
      getGroupActivityList(form).then((res) => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.loading = false
            this.$refs.table.onClearRowKeys()
          } else {
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onAdd() {
      this.$router.push('/activity/community/addActivity')
    },
    onDetail(item) {
      this.$router.push(`/activity/detail?id=${item.id}`)
    }
  }
}
</script>

<style scoped>

</style>